<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<style>
	.grid-demo{
		width: 100%;
		line-height: 20px;
		text-align: justify;
		margin-top: 10px;
		word-wrap:anywhere;
	}
	.popup{
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		z-index: 100;
	}

	.magnify{
		width: 50vw;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 110;
	}

	.magnify img{
		width: 100%;
	}
</style>

<body class="gray-bg">

	<div class="layui-fluid mt2">

		<div class="layui-row layui-bg-white " style="padding: 20px 10px;">
			<div class="layui-inline">
				评论对象:
			</div>
			<div class="layui-inline" th:text="${jazUserComment.names}"></div>
		</div>

		<div class="layui-row layui-bg-white" style="padding: 20px 10px;">
			<div class="layui-inline">
				评论人:
			</div>
			<div class="layui-inline" th:text="${jazUserComment.name}"></div>
		</div>

		<div class="layui-row layui-bg-white" style="padding: 20px 10px;">
			<div class="layui-inline">
				评价内容:
			</div>
			<div class="layui-inline">
				<p class="grid-demo" th:text="${jazUserComment.content}"></p>
			</div>
		</div>

		<div class="layui-row layui-bg-white" style="padding: 20px 10px;">
			<input type="hidden" th:value="${jazUserComment.photo}" id="showphoto">
			<div class="layui-inline">
				评价图片:
			</div>
			<div class="layui-inline" id="photo"></div>
		</div>

		<div class="layui-row layui-bg-white" style="padding: 20px 10px;">
			<div class="layui-inline">
				评论时间:
			</div>
			<div class="layui-inline" th:text="${jazUserComment.commentTime}"></div>
		</div>

	</div>

	<div th:include="include::footer"></div>

	<script>

		function changeScale(v){
			console.log(v)
			let str = `<div class="popup"></div><div class='magnify'><img src='${v}'></div>`;
			$('body').append(str)
		}

		$('body').on('click','.popup',function (){
			$(this).remove();
			$(".magnify").remove();
		})

		if($("#showphoto").val()){
			let showphoto = $("#showphoto").val();
				showphoto = showphoto.split(',');
				let str = '';
				showphoto.forEach(function (v){
					str += `<img src="${v}" width="100" height="100" style="margin-right: 10px" onclick="changeScale('${v}')"/>`
				})
				$("#photo").html(str);
		}

	</script>

</body>
</html>
